<template>
  <el-dialog title="" :visible.sync="dialogVisible" width="30%">
    <div style="display: flex; flex-direction: column">
      <div
        v-if="index != 2"
        style="
          font-size: 16px;
          font-weight: 500;
          color: #64b6a8;
          line-height: 20px;
          margin-bottom: 12px;
          margin-top: -6px;
          padding-right: 12px;
        "
      >
        您的举报将会在5个工作日之内处理，核实后会以系统通知的方式给您告知举报结果。
      </div>
      <div class="" style="font-size: 20px; color: #333333">
        请选择举报类型(必选)
      </div>
      <template v-if="index == 2">
        <!-- 举报人才 -->
        <div
          v-for="(item, index) in juBaoList2"
          @click="juLei2(item.type)"
          :key="index"
          style="
            cursor: pointer;
            display: flex;
            align-items: center;
            margin: 10px 0;
          "
        >
          <i
            class="el-icon-check"
            v-if="item.show"
            style="font-size: 24px; color: #64b6a8"
          ></i>
          <div
            v-else
            style="
              width: 22px;
              height: 22px;
              border-radius: 22px;
              border: #c9c9c9 1px solid;
            "
          ></div>
          <div style="color: #000000; font-size: 16px; margin-left: 12px">
            {{ item.type }}
          </div>
        </div>
      </template>
      <template v-else>
        <!-- 举报职位 -->
        <div
          v-for="(item, index) in juBaoList"
          @click="juLei(item.type)"
          :key="index"
          style="
            cursor: pointer;
            display: flex;
            align-items: center;
            margin: 10px 0;
          "
        >
          <i
            class="el-icon-check"
            v-if="item.show"
            style="
              border-radius: 4px;
              font-size: 24px;
              color: #fff;
              background-color: #64b6a8;
            "
          ></i>
          <div
            v-else
            style="
              width: 22px;
              height: 22px;
              border-radius: 4px;
              border: #c9c9c9 1px solid;
            "
          ></div>
          <div style="color: #000000; font-size: 16px; margin-left: 12px">
            {{ item.type }}
          </div>
        </div>
      </template>
    </div>
    <div style="color: #333333; font-size: 20px; margin-top: 19px">
      <span style="color: red">*</span>填写举报说明(必填)
    </div>
    <el-input
      type="textarea"
      placeholder="请详细填写举报理由"
      v-model="desc"
      maxlength="300"
      show-word-limit
      style="margin: 12px 0"
    >
    </el-input>
    <div style="color: #333333; font-size: 20px; margin-top: 19px">
      <span style="color: red">*</span>请上传凭证<span style="color: #d4d4d4"
        >(请提供截图，最多3张)</span
      >
    </div>
    <el-upload
      :action="$upLoad"
      list-type="picture-card"
      :accept="acceptArr"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :limit="3"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <div style="display: flex; margin-top: 42px; align-items: baseline">
      <i
        class="el-icon-success"
        v-if="xystate"
        style="font-size: 15px; color: #64b6a8"
        @click="xuanzhong"
      ></i>
      <div
        v-else
        style="
          width: 13px;
          height: 13px;
          border-radius: 13px;
          border: #c9c9c9 1px solid;
        "
        @click="xuanzhong"
      ></div>
      <div style="margin-left: 6px; color: #64b6a8">
        <span style="color: #666666">举报即默认同意</span>
        <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(3)"
          >《帮帮同城用户协议》</span
        >
        <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(2)"
          >《帮帮同城隐私政策》</span
        >
      </div>
    </div>
    <div
      style="
        color: #ffffff;
        font-size: 18px;
        width: 100%;
        height: 44px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 44px;
        border-radius: 40px;
        margin: 12px 0;
        cursor: pointer;
      "
      @click="subJu"
    >
      立即举报
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "report",
  props: ["bUserId", "index"],
  data() {
    return {
      acceptArr: this.$imgSuffixArr.join(","),
      xystate: false,
      dialogVisible: false,
      desc: "",
      agreement: true,
      juBaoList: [
        {
          type: "职位虚假",
          show: false,
        },
        {
          type: "薪资虚假",
          show: false,
        },
        {
          type: "地址虚假",
          show: false,
        },
        {
          type: "招聘者身份虚假",
          show: false,
        },
        {
          type: "违法/欺诈行为",
          show: false,
        },
        {
          type: "收取求职者费用",
          show: false,
        },
        {
          type: "公司不存在",
          show: false,
        },
        {
          type: "其他违规行为",
          show: false,
        },
      ],
      juBaoList2: [
        {
          type: "信息虚假",
          show: false,
        },
        {
          type: "电话不通",
          show: false,
        },
        {
          type: "发布者身份虚假",
          show: false,
        },
        {
          type: "违法/欺诈行为",
          show: false,
        },
        {
          type: "广告简历",
          show: false,
        },
        {
          type: "无意义简历(乱写,乱填)",
          show: false,
        },
        {
          type: "其他违规行为",
          show: false,
        },
      ],
      dialogImageUrl: [],
      dialogVisible: false,
      imgList: [],
      data: {
        userId: "",
        bUserId: "",
        reportType: "",
        houseId: "",
      },
    };
  },
  methods: {
    jubaoGuan(houseId) {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.dialogVisible = !this.dialogVisible;
        this.data.bUserId = this.bUserId;
        this.data.userId = user.id;
        this.data.houseId = houseId;
        this.data.businessType = 4;
        this.data.reportCategory = 4;
      } else {
        this.$message({
          message: "请登录之后在来举报！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    toXieyi(id) {
      window.open(
        "https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id=" +
          id,
        "_blank"
      );
    },
    juLei(type) {
      this.juBaoList.forEach((e) => {
        if (e.type == type) {
          e.show = !e.show;
        }
      });
    },
    juLei2(type) {
      this.juBaoList2.forEach((e) => {
        if (e.type == type) {
          e.show = !e.show;
        }
      });
    },
    xuanzhong() {
      if (this.xystate) {
        this.xystate = false;
      } else {
        this.xystate = true;
      }
    },
    subJu() {
      if (!this.xystate) {
        this.$message({
          message: "请阅读并同意相关协议",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      let reportType = "";
      if (this.index == 2) {
        reportType = this.juBaoList2
          .filter((item) => item.show)
          .map((item) => item.type)
          .join("|");
      } else {
        reportType = this.juBaoList
          .filter((item) => item.show)
          .map((item) => item.type)
          .join("|");
      }

      if (reportType.length == 0) {
        this.$message({
          message: "请选择举报类型！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.data.reportType = reportType;
      if (this.desc.trim().length == 0) {
        this.$message({
          message: "请填写举报理由！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.data.reportContent = this.desc;
      if (this.imgList.length > 0) {
        let image = "";
        this.imgList.forEach((e, index) => {
          if (index == this.imgList.length - 1) {
            image += e.path;
          } else {
            image += e.path + "|";
          }
        });
        console.log(image);
        this.data.image = image;
      }
      if (!this.imgList.length) {
        this.$message({
          message: "请选择上传图片！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      // console.log(this.data);
      // return;
      this.$postHttp("/mob/user/saveReport", this.data).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "举报成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.dialogVisible = false;
        }
      });
    },
    handleRemove(file, fileList) {
      for (var i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i].id == file.uid) {
          this.imgList.splice(i, 1);
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.imgList.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  padding: 0 20px 20px 20px;
}
</style>
